<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>Canvas Example 2 Alt (FPS Count)</title>
		
		<script>	

			// Code for the window.requestAnimFrame developed by Paul Irish <paul.irish at gmail dot com>
			// Based on this W3C spec (still a draft) http://webstuff.nfshost.com/anim-timing/Overview.html
			// shim layer with setTimeout fallback
		    window.requestAnimFrame = (function() {
		      return  window.requestAnimationFrame       || 
		              window.webkitRequestAnimationFrame || 
		              window.mozRequestAnimationFrame    || 
		              window.oRequestAnimationFrame      || 
		              window.msRequestAnimationFrame     || 
		              function(/* function */ callback, /* DOMElement */ element) {
		              	window.setTimeout(callback, 1000 / 60);
		              };
		    })();

			window.onload = function() {
				var canvas = document.getElementById('myCanvas');
				var c = canvas.getContext('2d');
				
				var fps = 0;
				
				var date = new Date();
				var seconds = date.getSeconds();
				
				c.font = '20px _sans';

				function draw() {
					var date = new Date();
					var s = date.getSeconds();
					if (s !== seconds) {
						seconds = s;

						c.fillStyle = '#000000';
						c.fillRect (0, 0, canvas.width, canvas.height);

						c.fillStyle = '#FFFFFF';
						c.fillText ("FPS: " + fps, 10, 20);

						fps = 0;
					} else {
						fps++;
					}

					requestAnimFrame(draw);
				}

				requestAnimFrame(draw);
			}
		</script>
		
    </head>
    <body>
		<canvas id="myCanvas" width="160" height="70" style="border: 1px solid black;">
			Your browser doesn't include support for the canvas tag.
		</canvas>
    </body>
</html>
